<template>
  <div v-if="showTooltip">
    <n-tooltip :placement="placement" trigger="hover">
      <template #trigger>
        <div
          f-c-c
          h-full
          cursor-pointer
          hover="bg-#f6f6f6"
          dark="hover:bg-#333"
        >
          <slot></slot>
        </div>
      </template>
      {{ tooltipContent }}
    </n-tooltip>
  </div>
  <div v-else f-c-c cursor-pointer hover="bg-#f6f6f6" dark="hover:bg-#333">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import type { PopoverPlacement } from "naive-ui";

interface Props {
  /** tooltip显示文本 */
  tooltipContent?: string;
  /** tooltip的位置 */
  placement?: PopoverPlacement;
}

const props = withDefaults(defineProps<Props>(), {
  tooltipContent: "",
  placement: "bottom",
});

const showTooltip = computed(() => Boolean(props.tooltipContent));
</script>
